<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新增</title>
    <script src="./js/axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        a {
            text-decoration: none;
        }
        
        .wrap {
            width: 900px;
            min-height: 90px;
            border: 1px solid skyblue;
            border-radius: 4px;
            margin: 6px;
        }
        
        .wrap h3 {
            width: 900px;
            height: 50px;
            background-color: rgb(179, 228, 247);
            margin-top: 0;
            line-height: 50px;
            color: rgb(10, 76, 104);
        }
        
        .wrap h2 {
            width: 900px;
            height: 60px;
            margin-top: 0;
            line-height: 60px;
            border-bottom: 2px solid #999;
        }
        
        .con {
            width: 880px;
            height: 100%;
            margin: 6px auto;
        }
        
        .con input {
            width: 876px;
            height: 40px;
            margin-top: 10px;
        }
        
        button {
            width: 876px;
            height: 40px;
            margin-top: 10px;
            background-color: rgb(10, 76, 104);
            color: #fff;
            border: 0;
            border-radius: 3px;
        }
    </style>
</head>

<body>
    编辑页面
    <div class="wrap">
        <h3>学生信息录入</h3>
        <h2>信息录入</h2>
        <div class="con">
            姓名<br>
            <input type="text" placeholder="请输入姓名"><br> 手机号
            <input type="text" placeholder="请输入手机号"><br> QQ号
            <input type="text" placeholder="请输入QQ号"><br> 专业
            <input type="text" placeholder="请输入专业"><br> 毕业时间
            <input type="text" placeholder="请输入毕业时间">
            <button>录入</button>
        </div>
    </div>

    <script>
        // 获取元素
        let ipts = document.querySelectorAll('.con input');
        let btn = document.querySelector('button');
        // 按钮加点击事件
        btn.onclick = function() {
            // 获取输入框的值
            let name = ipts[0].value;
            let phome = ipts[1].value;
            let qq = ipts[2].value;
            let major = ipts[3].value;
            let time = ipts[4].value;
            // 发起请求
            axios({
                method: "post",
                url: "http://localhost:3000/data",
                data: {
                    name: name,
                    phome: phome,
                    qq: qq,
                    major: major,
                    time: time
                }
            }).then((data) => {
                console.log(data);
                alert('录入成功');
                // 跳转到首页
                location.href = 'index.html'
            })
        }
    </script>
</body>

</html>